<!DOCTYPE html>
<HTML>

<HEAD>
<TITLE>ZTREE DEMO - Simple Data</TITLE>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<link rel="stylesheet" href="../js/ztree/zTreeStyle.css" type="text/css">
<script type="text/javascript" src="../js/jquery-1.8.3.js"></script>
<script type="text/javascript" src="../js/ztree/jquery.ztree.all-3.5.js"></script>
<!--  <script type="text/javascript" src="../../../js/jquery.ztree.excheck-3.5.js"></script>
	  <script type="text/javascript" src="../../../js/jquery.ztree.exedit-3.5.js"></script>-->
<SCRIPT type="text/javascript">
<!--
	var setting = {
		data : {
			simpleData : {
				enable : true
			}
		}
	};

	var zNodes = [ {
		id : 1,
		pId : 0,
		name : "父节点1 - 展开",
		open : true
	}, {
		id : 11,
		pId : 1,
		name : "父节点11 - 折叠"
	}, {
		id : 111,
		pId : 11,
		name : "叶子节点111"
	}, {
		id : 112,
		pId : 11,
		name : "叶子节点112"
	}, {
		id : 113,
		pId : 11,
		name : "叶子节点113"
	}, {
		id : 114,
		pId : 11,
		name : "叶子节点114"
	}, {
		id : 12,
		pId : 1,
		name : "父节点12 - 折叠"
	}, {
		id : 121,
		pId : 12,
		name : "叶子节点121"
	}, {
		id : 122,
		pId : 12,
		name : "叶子节点122"
	}, {
		id : 123,
		pId : 12,
		name : "叶子节点123"
	}, {
		id : 124,
		pId : 12,
		name : "叶子节点124"
	}, {
		id : 13,
		pId : 1,
		name : "父节点13 - 没有子节点",
		isParent : true
	}, {
		id : 2,
		pId : 0,
		name : "父节点2 - 折叠"
	}, {
		id : 21,
		pId : 2,
		name : "父节点21 - 展开",
		open : true
	}, {
		id : 211,
		pId : 21,
		name : "叶子节点211"
	}, {
		id : 212,
		pId : 21,
		name : "叶子节点212"
	}, {
		id : 213,
		pId : 21,
		name : "叶子节点213"
	}, {
		id : 214,
		pId : 21,
		name : "叶子节点214"
	}, {
		id : 22,
		pId : 2,
		name : "父节点22 - 折叠"
	}, {
		id : 221,
		pId : 22,
		name : "叶子节点221"
	}, {
		id : 222,
		pId : 22,
		name : "叶子节点222"
	}, {
		id : 223,
		pId : 22,
		name : "叶子节点223"
	}, {
		id : 224,
		pId : 22,
		name : "叶子节点224"
	}, {
		id : 23,
		pId : 2,
		name : "父节点23 - 折叠"
	}, {
		id : 231,
		pId : 23,
		name : "叶子节点231"
	}, {
		id : 232,
		pId : 23,
		name : "叶子节点232"
	}, {
		id : 233,
		pId : 23,
		name : "叶子节点233"
	}, {
		id : 234,
		pId : 23,
		name : "叶子节点234"
	}, {
		id : 3,
		pId : 0,
		name : "父节点3 - 没有子节点",
		isParent : true
	} ];

	$(document).ready(function() {
		$.fn.zTree.init($("#treeDemo"), setting, zNodes);
	});
//-->
</SCRIPT>
</HEAD>

<BODY>
	<h1>最简单的树 -- 简单 JSON 数据</h1>
	<h6>[ 文件路径: core/simpleData.html ]</h6>
	<div class="content_wrap">
		<div class="zTreeDemoBackground left">
			<ul id="treeDemo" class="ztree"></ul>
		</div>
		<div class="right">
			<ul class="info">
				<li class="title">
					<h2>1、setting 配置信息说明</h2>
					<ul class="list">
						<li class="highlight_red">必须设置 setting.data.simple 内的属性，详细请参见
							API 文档中的相关内容</li>
						<li>与显示相关的内容请参考 API 文档中 setting.view 内的配置信息</li>
						<li>name、children、title 等属性定义更改请参考 API 文档中 setting.data.key
							内的配置信息</li>
					</ul>
				</li>
				<li class="title">
					<h2>2、treeNode 节点数据说明</h2>
					<ul class="list">
						<li class="highlight_red">简单模式的 JSON 数据需要使用 id / pId
							表示节点的父子包含关系，如使用其他属性设置父子关联关系请参考 setting.data.simple 内各项说明
							<div>
								<pre xmlns="">
									<code>例如：
var nodes = [
	{id:1, pId:0, name: "父节点1"},
	{id:11, pId:1, name: "子节点1"},
	{id:12, pId:1, name: "子节点2"}
];</code>
								</pre>
							</div>
						</li>
						<li>默认展开的节点，请设置 treeNode.open 属性</li>
						<li>无子节点的父节点，请设置 treeNode.isParent 属性</li>
						<li>其他属性说明请参考 API 文档中 "treeNode 节点数据详解"</li>
					</ul>
				</li>
				<li class="title">
					<h2>3、其他说明</h2>
					<ul class="list">
						<li>Demo 中绝大部分都采用简单 JSON 数据模式，以便于大家学习</li>
					</ul>
				</li>
			</ul>
		</div>
	</div>
</BODY>

</HTML>